"use client";

import { DateField, NumberField, Show, TextField } from "@refinedev/antd";
import { useShow } from "@refinedev/core";
import { Tag, Typography } from "antd";

const { Title } = Typography;

// 分类映射
const categoryMap: Record<string, string> = {
    electronics: "电子产品",
    clothing: "服装",
    food: "食品",
    books: "图书",
};

export default function ProductShow() {
    const { result: record, query } = useShow({});
    const { isLoading } = query;

    // 获取分类值（处理字符串和对象两种情况）
    const getCategoryValue = () => {
        if (!record?.category) return "-";
        const categoryValue = typeof record.category === "string"
            ? record.category
            : record.category?.id || String(record.category);
        return categoryMap[categoryValue] || categoryValue;
    };

    return (
        <Show isLoading={isLoading}>
            <Title level={5}>商品ID</Title>
            <NumberField value={record?.id ?? ""} />

            <Title level={5}>商品名称</Title>
            <TextField value={record?.name} />

            <Title level={5}>商品描述</Title>
            <TextField value={record?.description} />

            <Title level={5}>价格</Title>
            <NumberField
                value={record?.price ?? 0}
                options={{
                    style: "currency",
                    currency: "CNY",
                }}
            />

            <Title level={5}>库存</Title>
            <NumberField value={record?.stock ?? 0} />

            <Title level={5}>分类</Title>
            <TextField value={getCategoryValue()} />

            <Title level={5}>状态</Title>
            <Tag color={record?.status === "active" ? "green" : "red"}>
                {record?.status === "active" ? "上架" : "下架"}
            </Tag>

            <Title level={5} style={{ marginTop: 16 }}>创建时间</Title>
            <DateField value={record?.createdAt} />
        </Show>
    );
}

